﻿<!--@Knockout-->
<div data-bind="dxTextBox: {value: login, placeholder: 'Login'}, 
    dxValidator: {
        name: 'Login',
        validationRules: [{
            type: 'required'
        }, {
            type: 'pattern',
            pattern: '^[a-zA-Z]+$',
            message: 'Do not use digits.'
        }]
    }">
</div>
<div data-bind="dxTextBox: { value: password, mode: 'password', placeholder:'Password' },
    dxValidator: { 
        validationRules: [{
            type: 'required',
            message: 'Password is required'
        }]
    }"> 
</div>
<div data-bind="dxValidationSummary: {}"></div>
<div data-bind="dxButton: { text: 'Validate and submit', onClick: validateAndSubmit }"></div>
<!--/@Knockout-->
<!--@AngularJS-->
<div ng-controller="demoController">
    <div ng-model="login" dx-text-box="{ placeholder: 'Login' }"
         dx-validator="{
            name: 'Login',
            validationRules: [{
                type: 'required'
            }, {
                type: 'pattern',
                pattern: '^[a-zA-Z]+$',
                message: 'Do not use digits.'
            }]
        }">
    </div>
    <div ng-model="password" dx-text-box="{ mode: 'password', placeholder:'Password' }"
         dx-validator="{
            validationRules: [{
                type: 'required',
                message: 'Password is required'
            }]
        }">
    </div>
    <div dx-validation-summary="{}"></div>
    <div dx-button="{ text: 'Validate and submit', onClick: validateAndSubmit }"></div>
</div>
<!--/@AngularJS-->
<!--@jQuery-->
<div id="textBox1"></div>
<div id="textBox2"></div>
<div id="summary"></div>
<div id="button"></div>
<!--/@jQuery-->